<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <svg width="2000" height="5000">
    <!-- 从起始点（50， 20）画一条到（250， 20）的直线 -->
    <path d="M50 20 L250 20" style="stroke: #000000;" />
    <!-- 从起始点（50， 50）画一条到（250， 50）的直线 和 从起始点（50， 100）画一条到（250， 100）的直线 -->
    <!-- M命令为多个时，后面的M命令为先线段的起始点 -->
    <path d="M50 50 L250 50 M50 100 L250 100" style="stroke: #ff0000;" />
    <!-- <path d="M50 50 H 200 V 200 H 50 L 50 50" fill="none" style="stroke: #000000;" /> -->
    <!-- 从起始点（50， 150）画一条到（250， 150）的直线 -->
    <!-- M命令后面连续跟着多个坐标点，除了第一个坐标点，后面的全部默认为隐式的L命令 -->
    <path d="M50 150 250 150" fill="none" style="stroke: #00ff00;" />

    <!-- 从起始点（50， 20）画一条X轴为250的水平直线 -->
    <path d="M50 170 H250 " style="stroke: #000000;" />

    <!-- 从起始点（50， 20）画一条Y轴为250的垂直直线 -->
    <path d="M50 180 V250" style="stroke: #000000;" />

    <path d="M50 300 H400 V350 Z" fill="none" style="stroke: #000000;" />

  </svg>
</body>

</html>